<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绩效</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/jsTest.css">
</head>

<body>
    <div class="top-navigation">
        <img class="arrow" onclick="backIndex()" src="img/arrow.png" alt="图片加载中">
        <h3>绩效考核</h3>
        <img class="search" src="img/search.png" alt="图片加载中">
    </div>
    <!-- 搜索界面 -->
    <div class="fades" hidden></div>
    <div class="bottom-modal" hidden>
        <div class="modal-wrapper">
            <div class="modals-title">
                <p style="opacity: 0;"></p>
                <h3>条件搜索</h3>
                <h5 class="clearForm">清空</h5>
            </div>
            <form class="forms">
                <div class="input-container">
                    <h3>考核对象</h3>
                    <input name="" type="text" placeholder="请输入考核对象">
                </div>
                <div class="input-container">
                    <h3>所属部门</h3>
                    <input name="" type="text" placeholder="请输入所属部门">
                </div>
            </form>
            <button id="search-btn">搜索</button>
        </div>
    </div>

    <!-- 切换tab页面 -->
    <ul class="tab1-content">
        <li id="records" class="active">考核记录</li>
        <!-- <li onclick="changeTba1(this,2)">得分统计</li> -->
        <li id="summarys">考核汇总</li>
    </ul>

    <!-- 考核记录内容 -->
    <div class="record-content"></div>
    <!-- 得分统计内容 -->
    <div class="score-content" hidden>
        <p class="gray-font">最新绩效得分</p>
        <div class="label">
            <h3 class="label-title">用户名</h3>
            <div class="label-info">李传志</div>
        </div>
        <div class="label">
            <h3 class="label-title">绩效得分</h3>
            <div class="label-info">155.56</div>
        </div>
        <div class="label">
            <h3 class="label-title">考核组别</h3>
            <div class="label-info">县领导</div>
        </div>

        <p class="gray-font">得分统计</p>
        <div class="label">
            <h3 class="label-title">100.0</h3>
            <div class="label-info">8个</div>
        </div>
        <div class="label">
            <h3 class="label-title">80.0</h3>
            <div class="label-info">2个</div>
        </div>
        <div class="label">
            <h3 class="label-title">60.0</h3>
            <div class="label-info">4个</div>
        </div>
        <div class="label">
            <h3 class="label-title">-50.0</h3>
            <div class="label-info">4个</div>
        </div>

        <p class="gray-font">得分公式</p>
        <p class="gray-font">
            ((100.0*8)+(80.0*2)+(60.0*4)-50.0*4)/(8+2+4+4) +
            ((100.0*8)+(80.0*2)+(60.0*4)-50.0*4)/10 = 155.56
        </p>
    </div>
    <!-- 考核汇总内容 -->
    <div class="summary-content" hidden>
        <ul class="tab2-content">
            <li class="active tabs2">业主单位</li>
            <li>审批部门</li>
            <li>督查组</li>
        </ul>
        <ul class="tab3-content">
            <li class="active tabs3">个人排名</li>
            <li>组内排名</li>
        </ul>
        <div class="containers">
            <div class="record-item">
                <h3>1</h3>
                <div>
                    <div class="first-row">
                        <p class="title">林涛</p>
                        <p class="score">208.44</p>
                    </div>
                    <div class="second-row">
                        <p class="hidden-font name">永泰县城投实业集团有限公司</p>
                        <p>排名：1</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="load" style="display: none;">
        <div class="load-tip">
            <p></p>
            <h3>点击加载更多</h3>
            <p></p>
        </div>
    </div>


    <script src="js/flexible.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <!-- <script src="js/jsTest.js"></script> -->
    <!-- VConsole手机调试 -->
    <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
    <script>
        // var vConsole = new VConsole();
        // 返回安卓首页
        function backIndex() {
            window.AndroidWebView.showInfoFromJs()
        }


        $(function () {

            // 请求考核记录
            var page2 = 1;
            var num2 = 0;
            // 获取用户电话号码
            var userPhone = window.AndroidWebView.getUserId();

            function loadRecode() {
                $.ajax({
                    url: "http://120.78.158.120:8099/zhApp/gradepoint/lists",
                    type: "POST",
                    dataType: "json", //返回数据形式为json
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify({
                        "userPhone": userPhone,
                        "paging": {
                            "currentPage": page2
                        }
                    }),
                    success: function (res) {
                        console.log(res);
                        if (res.code === "200") {
                            $("#load").css("display", "block");
                            var item = res.data;
                            var html = "";
                            for (var i = 0; i < item.length; i++) {
                                num2++
                                html = '\
                           <div class = "record-item">\
                               <h3>' + num2 + '</h3>\
                               <div>\
                                   <div class="first-row">\
                                       <p class = "title hidden-font"> ' + item[i].taskName + ' </p>\
                                       <p class="score">' + item[i].soucre + '</p>\
                                   </div>\
                                   <div class="second-row">\
                                       <p> ' + (item[i].resDept === undefined ? "---" : item[i].resDept) + ' </p>\
                                       <p> 排名： ' + (item[i].rank === undefined ? "---" : item[i].rank) + ' </p>\
                                   </div>\
                               </div>\
                           </div>\
                            ';
                                $(".record-content").append(html);
                            }

                            if (item.length !== 0) {
                                $(".load-tip h3").html("点击加载更多");
                            } else {
                                $(".load-tip h3").html("数据已加载完毕");
                            }
                        }
                    }
                });
            }

            // 初始化加载
            loadRecode();

            // 点击下拉加载更多
            $(".load-tip").click(function () {
                page2++
                console.log("page:" + page2);
                $(".load-tip h3").html("数据正在加载中");
                loadRecode();
            });


            //跳转考核汇总页面
            $(".tab1-content #summarys").click(function () {
                window.location.href = "./jxTest.html"
            });

        })
    </script>

    <script>
        // 显示模态框
        $(".top-navigation .search").click(function () {
            $(".bottom-modal").fadeIn();
            $(".fades").fadeIn();
        });

        // 关闭模态框
        $(".fades").click(function () {
            closeModal();
        });

        // 关闭模态框function
        function closeModal() {
            $(".bottom-modal").fadeOut();
            $(".fades").fadeOut();
        }
        // 重置form表单
        $(".clearForm").click(function () {
            $(".forms").find('input[type=text],select,input[type=hidden]').each(function () {
                $(this).val('');

            });

        });

        // 提交表单
        $("#search-btn").click(function () {
            var data = $(".forms").serialize();
            console.log(data);
            closeModal();
        });
    </script>
</body>

</html>